﻿<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.List,org.jbit.bean.DictionaryHelp,org.jbit.dao.*,java.util.ArrayList"%>
<%@ page import="org.jbit.bean.*,org.jbit.biz.*,org.jbit.dao.*"%>

 <%   
	UserDao UD = new UserDao();
	List<DictionaryHelp> listUser=new ArrayList<DictionaryHelp>();;
	listUser=UD.getUserDictionary();
	AddressDao AD=new AddressDao();
	List<province> province=new ArrayList<province>();
	province=AD.getprovince("1");
	List<city> city=new ArrayList<city>();
	List<county> county=new ArrayList<county>();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../js/jquery/css/rest.css" type="text/css" rel="stylesheet" />
<link href="../js/jquery/css/admin.css" type="text/css"	rel="stylesheet" />
<link href="../js/jquery/css/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<link href="../js/jquery/css/ui.multiselect.css" type="text/css"	rel="stylesheet" />
<link href="../js/jquery/css/jquery-ui-1.10.3.custom.min.css"	type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/jquery/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/jquery/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.10.3.custom.min.js"></script>

<style type="text/css">
.myFontClass{
	font-size:12px;
}
</style>

 
<script type="text/javascript">
	$(function() {
		$("#gridTable").jqGrid({
			url : "../UserQueryAction?method=list",
			datatype : "json",
			mtype : "GET",
			height :"600px",
			width :$(window).width()*0.980,
			colModel : [ {			
				name : "ID",index : "ID",	label : "用户编号",align : "center",classes : "myFontClass"}, {
				name : "userName",index : "userName",label : "用户名",align : "center",	classes : "myFontClass"}, {				
				name : "realName",index : "realName",label : "真实姓名",align : "center",classes : "myFontClass"}, {	
				name : "userMobile",index : "userMobile",label : "用户联系方式",align : "center",classes : "myFontClass"}, {				
				name : "password",index : "password",label : "密码",align : "center",	classes : "myFontClass"}, {
				name : "personId",index : "personId",label : "身份证号",align : "center",classes : "myFontClass"}, {
				name : "regitTime",index : "regitTime",label : "注册时间",align : "center",classes : "myFontClass"}, {
				name : "moduleMark",index : "moduleMark",label : "芯片编号",align : "center",classes : "myFontClass"},{
				name : "moduleMobile",index : "moduleMobile",label : "芯片绑定手机号码",align : "center",classes : "myFontClass"},{
				name : "type",index : "type",label : "用户类型",align : "center",classes : "myFontClass"},{
				name : "carId",index : "carId",label : "车牌号码",align : "center",classes : "myFontClass"},{
				name : "county",index : "county",label : "用户所在地",align : "center",classes : "myFontClass"},{
				name : "countyId",index : "countyId",label : "用户所在地Id",align : "center",classes : "myFontClass",hidden:"true"},{
				name : "typeId",index : "typeId",label : "类型Id",align : "center",classes : "myFontClass",hidden:"true"},
			],
			viewrecords : true,
			rowNum : 15,
			rowList : [ 10, 15, 20 ],
			prmNames : {
				search : "search"
			}, //(1)
			jsonReader : {
				root : "gridModel", 
				records : "record", 
				repeatitems : false	
			}, 
			sortname : "ID",
			sordorder : "desc",
			multiselect : true,

			pager : "#gridPager",
			hidegrid : false
				});
	
	$("#search_btn").click(function() {
			var keyWords = $("#keyWordsId").val();
			var choiceitem = $("#choiceItemId").val();
			if (keyWords == "")
				alert("请输入查询关键字,并选择对应的字段!!");
			else {
				$("#gridTable").jqGrid('setGridParam', {
					datatype : 'json',
					postData : {
						'kw' : encodeURI(keyWords),
						'ci' : choiceitem
					}, //发送数据  
					page : 1
				}).trigger("reloadGrid"); //重新载入
			}
		});

		//刷新
		$("#refreshId").click(function() {
			$("#gridTable").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			}).trigger("reloadGrid"); //重新载入  
		});
		
		function refreshJquery() {
			$("#gridTable").jqGrid('setGridParam', {
				datatype : 'json',
				page : 1
			}).trigger("reloadGrid"); //重新载入  
		}

		//添加
		$("#addId").click(function() {
		var nows= new Date();
		var year=nows.getYear()+1900;
		var month=nows.getMonth()+1;
		var day=nows.getDate();
			$("#userName1").val("");
			$("#realName1").val("");
			$("#userMobile1").val("");			
			$("#password1").val("888888");
			$("#personId1").val("");
			$("#regitTime1").val(year+"-"+month+"-"+day);			
			$("#moduleMark1").val("");
			$("#moduleMobile1").val("");			
			$("#type1").val("");
			$("#carId1").val("");
			$("#countyId1").val("");
			$("#dialog-form-add").dialog("open");

		});

		//删除
		$("#delId").click(function() {
		var id = jQuery("#gridTable").jqGrid('getGridParam', 'selarrrow');
		if (id.length == 0) {
		alert("请选择需要处理的信息,至少一项!!");
		return;
		}
		var Ids = "";
		for ( var i = 0; i < id.length; i++) {
		var rowData = $("#gridTable").getRowData(id[i]);
		Ids += rowData.ID + ",";
		}
		var c = confirm("您正准备删除序号为:" + Ids + "的用户信息");
		if (c == true) {
		Ids = Ids.substr(0, Ids.length - 1);
		$.post("../UserUpdateAction?method=delete&ids="	+ Ids, function(data) {
		alert(data);
		refreshJquery();
		});
		}
		});

		//编辑
		$("#editId").click(function() {
			var id = jQuery("#gridTable").jqGrid('getGridParam', 'selarrrow');
			if (id.length == 0) {
				alert("请选择需要处理的信息,至少一项!!");
				return;
			}
			if (id.length != 1) {
				alert("添加只能选择一项!!");
					return;
			}
			for ( var i = 0; i < id.length; i++) {
				var rowData = $("#gridTable").getRowData(id[i]);
				//alert(rowData.dicname);
			$("#ID").val(rowData.ID);
			$("#userName").val(rowData.userName);
			$("#realName").val(rowData.realName);
			$("#userMobile").val(rowData.userMobile);
			$("#password").val(rowData.password);
			$("#personId").val(rowData.personId);
			$("#regitTime").val(rowData.regitTime);			
			$("#moduleMark").val(rowData.moduleMark);
			$("#moduleMobile").val(rowData.moduleMobile);
			$("#type").val(rowData.type);
			$("#typeO").val(rowData.typeId);
			$("#carId").val(rowData.carId);
			$("#countyIdOs").val(rowData.county);
			$("#countyIdO").val(rowData.countyId);
			$("#dialog-form").dialog("open");
			}
		});

		$("#dialog-form")
				.dialog({
							autoOpen : false,
							height : 380,
							width : 800,
							modal : true,
							buttons: {
				"保存": function() {
				if (checkGroupUpInfo()){
		$.post("../UserUpdateAction?method=update",
				$("#saveFormId").serialize(), function(data) {
					alert(data);
					refreshJquery();
				});
						$( this ).dialog( "close" );}
					
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
			}
					
						});

		//添加
		$("#dialog-form-add")
				.dialog(
						{
							autoOpen : false,
							height :380,
							width : 800,
							modal : true,
							buttons: {
	"保存" : function() {
	if (checkGroupAddInfo()) {
	$.post("../UserUpdateAction?method=add",
	$("#addFormId").serialize(),function(data) {
	alert(data);
	refreshJquery();
	});
	$(this).dialog("close");
	}
	},
	"取消" : function() {
	$(this).dialog("close");
	}
		},
	close : function() {
	}
	});

	});
	
     function ismobile(mobile) {
	
	 if (mobile == null || mobile == "" ) {
			 alert("手机不可为空");
			return false;
		}  
		  
		if (mobile.length != 11) {
			alert("手机号码长度不对，请重新输入");
			return false;
		}

		var myreg = /^1[3|4|5|8][0-9]\d{4,8}$/;
		if (!myreg.test(mobile)) {
			alert("手机格式有误，请重新输入");
			return false;
		}
		return true;
	}

	function checkGroupUpInfo() {
	var realName = document.saveFormId.realName.value;	//真实姓名
	var userMobile = document.saveFormId.userMobile.value;	//用户联系方式
	var moduleMobile = document.saveFormId.moduleMobile.value;	//模块号码
	var moduleMark = document.saveFormId.moduleMark.value;	//模块号
	var personId = document.saveFormId.personId.value;	//身份证号
	

	 if (realName == null || realName == "") {			alert("请填写真实姓名");
			return false;
		}  else if (!ismobile(userMobile)) { 
			return false;
		} else if (moduleMobile == null || moduleMobile == "") {			alert("请填写模块号码");
			return false;
		} else if (moduleMark == null || moduleMark == "") {			alert("请填写模块号");
			return false;
		} else if (personId == null || personId == "") {			alert("请填写身份证号");
			return false;
		}
else {
			return true;
		}
		
	}

	function checkGroupAddInfo() {
	var realName = document.addFormId.realName1.value;	//真实姓名
	var userMobile = document.addFormId.userMobile1.value;	//用户联系方式
	var moduleMobile = document.addFormId.moduleMobile1.value;	//模块号码
	var moduleMark = document.addFormId.moduleMark1.value;	//模块号
	var personId = document.addFormId.personId1.value;	//身份证号

	 if (realName == null || realName == "") {			alert("请填写真实姓名");
			return false;
		}  
		else if (!ismobile(userMobile)) { 
			return false;
		} 
		else if (moduleMobile == null || moduleMobile == "") {			alert("请填写模块号码");
			return false;
		} 
		else if (moduleMark == null || moduleMark == "") {			alert("请填写模块号");
			return false;
		} 
		else if (personId == null || personId == "") {			alert("请填写身份证号");
			return false;
		}
else {
			return true;
		}
		
	}
	function chgCity()
	{
	var province=$("#province").val();
	CitySelectDel();
	CitySelectOp(province);	
		}
	function CitySelectOp(province)
     {
     var obj = $('#city');//取得jQuery对象
     obj.append('<option value="0" selected><--请选择--></option>');
     $.ajax({  
             type: "post",  
             url: "../AddressUpdateAction?method=getCity",  
             data:"province="+province, 
             success: function(list){
              var json = eval("(" + list + ")");
              $.each(json,function(i, vrow){
              $.each(vrow,function(j, test){ 
             obj.append('<option value='+test.id+'>'+test.name+'</option>');//添加一个option    
 
 });//vrow结束 
 });//json结束
}  //函数success结束
}); // ajax结束
     }

    function CitySelectDel()
     {
    var obj = $('#city');//取得jQuery对象
    var len = $('#city option').length;//取得Options 的长度  
      var arrA = new Array();   
     for (var i = 0; i < len; i++) {
     arrA[i] = obj[0].options[i].value;
       }//遍历option
    for (var i=0;i<arrA.length;i++)
    {      
      $('#city option[value='+arrA[i]+']').remove(); 
    }
     }
 function chgCounty()
	{
	var city=$("#city").val();
	CountySelectDel();
	CountySelectOp(city);	
		}
	function CountySelectOp(city)
     {
     var obj = $('#countyId');//取得jQuery对象
     obj.append('<option value="0" selected><--请选择--></option>');
     $.ajax({  
             type: "post",  
             url: "../AddressUpdateAction?method=getCounty",  
             data:"city="+city, 
             success: function(list){
              var json = eval("(" + list + ")");
              $.each(json,function(i, vrow){
              $.each(vrow,function(j, test){ 
             obj.append('<option value='+test.id+'>'+test.name+'</option>');//添加一个option    
 
 });//vrow结束 
 });//json结束
}  //函数success结束
}); // ajax结束
     }

    function CountySelectDel()
     {
    var obj = $('#countyId');//取得jQuery对象
    var len = $('#countyId option').length;//取得Options 的长度  
      var arrA = new Array();   
     for (var i = 0; i < len; i++) {
     arrA[i] = obj[0].options[i].value;
       }//遍历option
    for (var i=0;i<arrA.length;i++)
    {      
      $('#countyId option[value='+arrA[i]+']').remove(); 
    }
     }  
     
     function chgCity1()
	{
	var province1=$("#province1").val();
	CitySelectDel1();
	CitySelectOp1(province1);	
		}
	function CitySelectOp1(province1)
     {
     var obj = $('#city1');//取得jQuery对象
     obj.append('<option value="0" selected><--请选择--></option>');
     $.ajax({  
             type: "post",  
             url: "../AddressUpdateAction?method=getCity",  
             data:"province="+province1, 
             success: function(list){
              var json = eval("(" + list + ")");
              $.each(json,function(i, vrow){
              $.each(vrow,function(j, test){ 
             obj.append('<option value='+test.id+'>'+test.name+'</option>');//添加一个option    
 
 });//vrow结束 
 });//json结束
}  //函数success结束
}); // ajax结束
     }

    function CitySelectDel1()
     {
    var obj = $('#city1');//取得jQuery对象
    var len = $('#city1 option').length;//取得Options 的长度  
      var arrA = new Array();   
     for (var i = 0; i < len; i++) {
     arrA[i] = obj[0].options[i].value;
       }//遍历option
    for (var i=0;i<arrA.length;i++)
    {      
      $('#city1 option[value='+arrA[i]+']').remove(); 
    }
     }
 function chgCounty1()
	{
	var city1=$("#city1").val();
	CountySelectDel1();
	CountySelectOp1(city1);	
		}
	function CountySelectOp1(city1)
     {
     var obj = $('#countyId1');//取得jQuery对象
     obj.append('<option value="0" selected><--请选择--></option>');
     $.ajax({  
             type: "post",  
             url: "../AddressUpdateAction?method=getCounty",  
             data:"city="+city1, 
             success: function(list){
              var json = eval("(" + list + ")");
              $.each(json,function(i, vrow){
              $.each(vrow,function(j, test){ 
             obj.append('<option value='+test.id+'>'+test.name+'</option>');//添加一个option    
 
 });//vrow结束 
 });//json结束
}  //函数success结束
}); // ajax结束
     }

    function CountySelectDel1()
     {
    var obj = $('#countyId1');//取得jQuery对象
    var len = $('#countyId1 option').length;//取得Options 的长度  
      var arrA = new Array();   
     for (var i = 0; i < len; i++) {
     arrA[i] = obj[0].options[i].value;
       }//遍历option
    for (var i=0;i<arrA.length;i++)
    {      
      $('#countyId1 option[value='+arrA[i]+']').remove(); 
    }
     }  		
</script>
</head>
<body>

<div id="dialog-form" class="right" style="height:100%;overflow-x:hidden;overflow-y:auto">
		<form id="saveFormId" name="saveFormId">
			<div class="nva_bg">
				<span class="f_l"><strong>用户编辑</strong></span>
			</div>
			<div style="width:100%;height:auto; margin:2px auto;padding:0px;">
			<input name="ID" id="ID" type="hidden"/>
				<table width="100%" cellpadding="0" cellspacing="0" border="0"
					class="formTable" style="margin:0px;">					
					<tr>
						<th width="25%" class="redColor">用户名</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="userName" id="userName" value="" readonly/></td>	
					<th width="25%" class="redColor">真实姓名</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="realName" id="realName" value="" /></td>						
					</tr>
					<tr>
						<th width="25%" class="redColor">用户联系方式</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="userMobile" id="userMobile" value="" /></td>	
					<th width="25%" class="redColor">模块号码</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="moduleMobile" id="moduleMobile" value="" /></td>						
					</tr>
					<tr>
						<th width="25%" class="redColor">密码</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="password" id="password" value="" /></td>	
					<th width="25%" class="redColor">身份证号</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="personId" id="personId" value="" /></td>						
					</tr>
							<tr>
						<th width="25%" class="redColor">注册时间</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="regitTime" id="regitTime" readonly value=""  /></td>	
					<th width="25%" class="redColor">用户类型</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="hidden" name='typeO' id='typeO' value=""/>
						<select name='type' style='width:96%'>						
					<option value='8'><%="<--请选择-->" %></option>
					<%for (int i=0;i<listUser.size();i++){ %>
					<option value='<%=listUser.get(i).getKey() %>'><%=listUser.get(i).getValue()%></option>
					<%} %>					
					</select>		
					</td>						
					</tr>
					<tr>						
						<th width="25%" class="redColor">芯片编号</th>
						<td width="75%" style="text-align:left;text-indent:1em" colspan="3">
						<input type="text"	name="moduleMark" id="moduleMark" value="" /> </td>
						
					</tr>
					<tr>						
						<th width="25%" class="redColor">车牌号码</th>
						<td width="75%" style="text-align:left;text-indent:1em" colspan="3">
						<input type="text"	name="carId" id="carId" value="" /> </td>
						
					</tr>
					<tr>						
						<th width="25%" class="redColor">用户所在地</th>
						<td width="25%" style="text-align:left;text-indent:1em">
						<input type="hidden" name='countyIdO' id='countyIdO' value=""/>
						<input type="text"	name="countyIdOs" id="countyIdOs" value="" />
						 </td>
						 <td width="50%" colspan="2">
						 <table><tr>
						  <td> <select id="province" onChange="chgCity()">
						 <%for (int i=0;i<province.size();i++){ %>
						<option value="<%=province.get(i).getId() %>"><%=province.get(i).getName() %></option>
						<%} %>
						</select></td>
						 <td> <select id="city" onChange="chgCounty()">
						 <%for (int i=0;i<AD.getcity("1").size();i++){ %>
						<option value="<%=AD.getcity("1").get(i).getId() %>"><%=AD.getcity("1").get(i).getName() %></option>
						<%} %>
						</select></td>
						 <td> <select id="countyId" name="countyId">
						<%for (int i=0;i<AD.getcounty("96").size();i++){ %>
						<option value="<%=AD.getcounty("96").get(i).getId() %>"><%=AD.getcounty("96").get(i).getName() %></option>
						<%} %>
						</select></td></tr></table>
						
						 </td>
					</tr>
				</table>
			</div>
		</form>
	</div>

	<div id="dialog-form-add" class="right" style="height:100%;overflow-x:hidden;overflow-y:auto">
		<form id="addFormId" name="addFormId">
			<div class="nva_bg">
				<span class="f_l"><strong>用户添加</strong></span>
			</div>
			
				<div style="width:100%;height:auto; margin:2px auto;padding:0px;">
				<table width="100%" cellpadding="0" cellspacing="0" border="0"
					class="formTable" style="margin:0px;">					
					 <tr>
					<!-- 	<th width="25%" class="redColor">用户名</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input width="25%" type="text"	name="userName1" id="userName1" value="" /></td>	-->
					<th width="25%" class="redColor">真实姓名</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input width="25%" type="text" name="realName1" id="realName1" value="" /></td>						
					</tr>
					<tr>
						<th width="25%" class="redColor">用户联系方式</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="userMobile1" id="userMobile1" value="" /></td>	
					<th width="25%" class="redColor">模块号码</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input type="text"	name="moduleMobile1" id="moduleMobile1" value="" /></td>						
					</tr>
					<tr>
						<th width="25%" class="redColor">密码</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input width="25%" type="text"	name="password1" id="password1" value="" /></td>	
					<th width="25%" class="redColor">身份证号</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input width="25%" type="text" name="personId1" id="personId1" value="" /></td>						
					</tr>
							<tr>
						<th width="25%" class="redColor">注册时间</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
						<input width="25%" type="text"	name="regitTime1" id="regitTime1" readonly value=""  /></td>	
					<th width="25%" class="redColor">用户类型</th>
						<td width="25%" style="text-align:left;text-indent:1em;">
							<select name='type1' style='width:96%'>						
					<option value='2'><%="<--请选择-->" %></option>
					<%for (int i=0;i<listUser.size();i++){ %>
					
					<option value='<%=listUser.get(i).getKey()%>'><%=listUser.get(i).getValue()%></option>
					<%} %>					
					</select>	
					</td>						
					</tr>
					<tr>						
						<th width="25%" class="redColor">芯片编号</th>
						<td width="75%" style="text-align:left;text-indent:1em;" colspan="3">
						<input width="25%" type="text"	name="moduleMark1" id="moduleMark1" value="" /> </td>
					</tr>
					<tr>						
						<th width="25%" class="redColor">车牌号码</th>
						<td width="75%" style="text-align:left;text-indent:1em" colspan="3">
						<input type="text"	name="carId1" id="carId1" value="" /> </td>
					</tr>
					<tr>						
						<th width="25%" class="redColor">用户所在地</th>
						
						 <td width="75%" colspan="3">
						 <table><tr>
						  <td> <select id="province1" onChange="chgCity1()">
						 <%for (int i=0;i<province.size();i++){ %>
						<option value="<%=province.get(i).getId() %>"><%=province.get(i).getName() %></option>
						<%} %>
						</select></td>
						 <td> <select id="city1" onChange="chgCounty1()">
						 <%for (int i=0;i<AD.getcity("1").size();i++){ %>
						<option value="<%=AD.getcity("1").get(i).getId() %>"><%=AD.getcity("1").get(i).getName() %></option>
						<%} %>
						</select></td>
						 <td> <select id="countyId1" name="countyId1">
						<%for (int i=0;i<AD.getcounty("96").size();i++){ %>
						<option value="<%=AD.getcounty("96").get(i).getId() %>"><%=AD.getcounty("96").get(i).getName() %></option>
						<%} %>
						</select></td></tr></table>
						
						 </td>
					</tr>
				</table>
			</div>
		</form>
	</div>

	<div class="g-bd3 f-cb">
		<!--content begin-->
		<div class="g-mn3">
			<div class="right">
				<div class="topBar"  style="position:absolute; width:650px;float:right; right:5%;">
					<b></b><b></b> <label style="margin-left:13px;">关键字：</label><input
						id="keyWordsId" type="text" /> <label style="margin-left:13px;">请选择：</label>

					<select id="choiceItemId">
						<option value="userName">姓名</option>
						<option value="regitTime">注册时间</option>
						<option value="type">用户类型</option>

					</select> <a href="#" class="btn_selected_small" style="margin-left:17px;"
						id="search_btn"><span>搜索</span> </a> <a href="#"
						class="btn_normal_small" style="margin-left:17px;"><span
						id="refreshId">刷新</span> </a>
				</div>
				<div style="width:98%;height:auto; position:relative; float:left;width:300px; ">

					<div class="gridTopBar">
						<span style="margin-left:10px;"><a href="#" id="addId" ><img
							src="../js/jquery/images/add.gif"/>添加</a> </span> <span><a
							href="#" id="editId"><img
								src="../js/jquery/images/edit.gif" />编辑</a> </span> <span><a
							href="#" id="delId"><img src="../js/jquery/images/del.gif" />删除</a>
						</span>
					</div>
					<table id="gridTable"></table>
					<div id="gridPager"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
